<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="renderer" content="webkit" />
		<meta name="force-rendering" content="webkit" />
		<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1" />
		<title>Canvas</title>
		<meta name="description" content="" />
		<meta name="keywords" content="" />
		<meta name="viewport" content="width=device-width, maximum-scale=1, initial-scale=1, user-scalable=no">
		<link rel="stylesheet" type="text/css" href="css/reset.css" />
		<link rel="stylesheet" type="text/css" href="layui/css/layui.css" />
		<link rel="stylesheet" type="text/css" href="css/scrollBar.css"/>
		<link rel="stylesheet" type="text/css" href="css/swiper.min.css"/>
		<link rel="stylesheet" type="text/css" href="css/style.css" />
		<link rel="stylesheet" type="text/css" href="css/responsive.css" />
		<script src="js/echarts.min.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div class="canvas-box">
			<div class="hd ">
				<div class="left">
					<h3>Godiva parameter</h3>
					<a id="redact-btn" href="javascript:void(0);"></a>
				</div>
				<div class="btns g-button-wrap">
					<button class="undo-button border " type="button">undo</button>
					<button class="cancel-button" type="button">Cancel</button>
					<button class="save-button border " type="button">Save</button>
				</div>
			</div>
			<div class="bd ">
				<div class="product-sidebar">
					<div class="collapse">
						<div class="colla-item">
							<div class="colla-tit ">
								<h3>Backdrop</h3>
							</div>
							<div class="colla-content " >
								<ul>
									<li>
										<a href="javascript:void(0);">
											<div class="img">
												<img src="images/backdrop_01.png" alt="">
											</div>
											<div class="txt">
												<p>Canvas</p>
											</div>
										</a>
									</li>
									<li>
										<a href="javascript:void(0);">
											<div class="img">
												<img src="images/backdrop_02.png" alt="">
											</div>
											<div class="txt">
												<p>Small</p>
											</div>
										</a>
									</li>
									<li>
										<a href="javascript:void(0);">
											<div class="img">
												<img src="images/backdrop_03.png" alt="">
											</div>
											<div class="txt">
												<p>Large</p>
											</div>
										</a>
									</li>
									<li>
										<a href="javascript:void(0);">
											<div class="img">
												<img src="images/backdrop_04.png" alt="">
											</div>
											<div class="txt">
												<p>Seamless</p>
											</div>
										</a>
									</li>
									<li>
										<a href="javascript:void(0);">
											<div class="img">
												<img src="images/backdrop_05.png" alt="">
											</div>
											<div class="txt">
												<p>Brick </p>
											</div>
										</a>
									</li>
									<li>
										<a href="javascript:void(0);">
											<div class="img">
												<img src="images/img_18.png" alt="">
											</div>
											<div class="txt">
												<p>White</p>
											</div>
										</a>
									</li>
									<li>
										<a href="javascript:void(0);">
											<div class="img">
												<img src="images/backdrop_01.png" alt="">
											</div>
											<div class="txt">
												<p>Canvas</p>
											</div>
										</a>
									</li>
									<li>
										<a href="javascript:void(0);">
											<div class="img">
												<img src="images/backdrop_02.png" alt="">
											</div>
											<div class="txt">
												<p>Small</p>
											</div>
										</a>
									</li>
									<li>
										<a href="javascript:void(0);">
											<div class="img">
												<img src="images/backdrop_03.png" alt="">
											</div>
											<div class="txt">
												<p>Large</p>
											</div>
										</a>
									</li>
								</ul>
							</div>
						</div>
						<div class="colla-item">
							<div class="colla-tit ">
								<h3>Product</h3>
							</div>
							<div class="colla-content ">
								<ul>
									<li>
										<a href="javascript:void(0);">
											<div class="img">
												<img src="images/backdrop_01.png" alt="">
											</div>
											<div class="txt">
												<p>Canvas</p>
											</div>
										</a>
									</li>
									<li>
										<a href="javascript:void(0);">
											<div class="img">
												<img src="images/backdrop_02.png" alt="">
											</div>
											<div class="txt">
												<p>Small</p>
											</div>
										</a>
									</li>
									<li>
										<a href="javascript:void(0);">
											<div class="img">
												<img src="images/backdrop_03.png" alt="">
											</div>
											<div class="txt">
												<p>Large</p>
											</div>
										</a>
									</li>
									<li>
										<a href="javascript:void(0);">
											<div class="img">
												<img src="images/backdrop_04.png" alt="">
											</div>
											<div class="txt">
												<p>Seamless</p>
											</div>
										</a>
									</li>
									<li>
										<a href="javascript:void(0);">
											<div class="img">
												<img src="images/backdrop_05.png" alt="">
											</div>
											<div class="txt">
												<p>Brick </p>
											</div>
										</a>
									</li>
									<li>
										<a href="javascript:void(0);">
											<div class="img">
												<img src="images/img_18.png" alt="">
											</div>
											<div class="txt">
												<p>White</p>
											</div>
										</a>
									</li>
								</ul>	
							</div>
						</div>
						<div class="colla-item">
							<div class="colla-tit ">
								<h3>Camera</h3>
							</div>
							<div class="colla-content ">
								<ul>
									<li>
										<a href="javascript:void(0);">
											<div class="img">
												<img src="images/backdrop_01.png" alt="">
											</div>
											<div class="txt">
												<p>Canvas</p>
											</div>
										</a>
									</li>
									<li>
										<a href="javascript:void(0);">
											<div class="img">
												<img src="images/backdrop_02.png" alt="">
											</div>
											<div class="txt">
												<p>Small</p>
											</div>
										</a>
									</li>
									<li>
										<a href="javascript:void(0);">
											<div class="img">
												<img src="images/backdrop_03.png" alt="">
											</div>
											<div class="txt">
												<p>Large</p>
											</div>
										</a>
									</li>
									<li>
										<a href="javascript:void(0);">
											<div class="img">
												<img src="images/backdrop_04.png" alt="">
											</div>
											<div class="txt">
												<p>Seamless</p>
											</div>
										</a>
									</li>
									<li>
										<a href="javascript:void(0);">
											<div class="img">
												<img src="images/backdrop_05.png" alt="">
											</div>
											<div class="txt">
												<p>Brick </p>
											</div>
										</a>
									</li>
									<li>
										<a href="javascript:void(0);">
											<div class="img">
												<img src="images/img_18.png" alt="">
											</div>
											<div class="txt">
												<p>White</p>
											</div>
										</a>
									</li>
								</ul> 
							</div>
						</div>
						<div class="colla-item">
							<div class="colla-tit ">
								<h3>Lighting</h3>
							</div>
							<div class="colla-content ">
								<ul>
									<li>
										<a href="javascript:void(0);">
											<div class="img">
												<img src="images/backdrop_01.png" alt="">
											</div>
											<div class="txt">
												<p>Canvas</p>
											</div>
										</a>
									</li>
									<li>
										<a href="javascript:void(0);">
											<div class="img">
												<img src="images/backdrop_02.png" alt="">
											</div>
											<div class="txt">
												<p>Small</p>
											</div>
										</a>
									</li>
									<li>
										<a href="javascript:void(0);">
											<div class="img">
												<img src="images/backdrop_03.png" alt="">
											</div>
											<div class="txt">
												<p>Large</p>
											</div>
										</a>
									</li>
									<li>
										<a href="javascript:void(0);">
											<div class="img">
												<img src="images/backdrop_04.png" alt="">
											</div>
											<div class="txt">
												<p>Seamless</p>
											</div>
										</a>
									</li>
									<li>
										<a href="javascript:void(0);">
											<div class="img">
												<img src="images/backdrop_05.png" alt="">
											</div>
											<div class="txt">
												<p>Brick </p>
											</div>
										</a>
									</li>
									<li>
										<a href="javascript:void(0);">
											<div class="img">
												<img src="images/img_18.png" alt="">
											</div>
											<div class="txt">
												<p>White</p>
											</div>
										</a>
									</li>
								</ul>
							</div>
						</div>
						<div class="colla-item">
							<div class="colla-tit ">
								<h3>Accessories</h3>
							</div>
							<div class="colla-content">
								<ul>
									<li>
										<a href="javascript:void(0);">
											<div class="img">
												<img src="images/backdrop_01.png" alt="">
											</div>
											<div class="txt">
												<p>Canvas</p>
											</div>
										</a>
									</li>
									<li>
										<a href="javascript:void(0);">
											<div class="img">
												<img src="images/backdrop_02.png" alt="">
											</div>
											<div class="txt">
												<p>Small</p>
											</div>
										</a>
									</li>
									<li>
										<a href="javascript:void(0);">
											<div class="img">
												<img src="images/backdrop_03.png" alt="">
											</div>
											<div class="txt">
												<p>Large</p>
											</div>
										</a>
									</li>
									<li>
										<a href="javascript:void(0);">
											<div class="img">
												<img src="images/backdrop_04.png" alt="">
											</div>
											<div class="txt">
												<p>Seamless</p>
											</div>
										</a>
									</li>
									<li>
										<a href="javascript:void(0);">
											<div class="img">
												<img src="images/backdrop_05.png" alt="">
											</div>
											<div class="txt">
												<p>Brick </p>
											</div>
										</a>
									</li>
									<li>
										<a href="javascript:void(0);">
											<div class="img">
												<img src="images/img_18.png" alt="">
											</div>
											<div class="txt">
												<p>White</p>
											</div>
										</a>
									</li>
								</ul>
							</div>
						</div>
						<div class="colla-item">
							<div class="colla-tit ">
								<h3>Props</h3>
							</div>
							<div class="colla-content ">
								<ul>
									<li>
										<a href="javascript:void(0);">
											<div class="img">
												<img src="images/backdrop_01.png" alt="">
											</div>
											<div class="txt">
												<p>Canvas</p>
											</div>
										</a>
									</li>
									<li>
										<a href="javascript:void(0);">
											<div class="img">
												<img src="images/backdrop_02.png" alt="">
											</div>
											<div class="txt">
												<p>Small</p>
											</div>
										</a>
									</li>
									<li>
										<a href="javascript:void(0);">
											<div class="img">
												<img src="images/backdrop_03.png" alt="">
											</div>
											<div class="txt">
												<p>Large</p>
											</div>
										</a>
									</li>
									<li>
										<a href="javascript:void(0);">
											<div class="img">
												<img src="images/backdrop_04.png" alt="">
											</div>
											<div class="txt">
												<p>Seamless</p>
											</div>
										</a>
									</li>
									<li>
										<a href="javascript:void(0);">
											<div class="img">
												<img src="images/backdrop_05.png" alt="">
											</div>
											<div class="txt">
												<p>Brick </p>
											</div>
										</a>
									</li>
									<li>
										<a href="javascript:void(0);">
											<div class="img">
												<img src="images/img_18.png" alt="">
											</div>
											<div class="txt">
												<p>White</p>
											</div>
										</a>
									</li>
								</ul> 
							</div>
						</div>
						<div class="colla-item">
							<div class="colla-tit ">
								<h3>Annotations</h3>
							</div>
							<div class="colla-content ">
								<ul>
									<li>
										<a href="javascript:void(0);">
											<div class="img">
												<img src="images/backdrop_01.png" alt="">
											</div>
											<div class="txt">
												<p>Canvas</p>
											</div>
										</a>
									</li>
									<li>
										<a href="javascript:void(0);">
											<div class="img">
												<img src="images/backdrop_02.png" alt="">
											</div>
											<div class="txt">
												<p>Small</p>
											</div>
										</a>
									</li>
									<li>
										<a href="javascript:void(0);">
											<div class="img">
												<img src="images/backdrop_03.png" alt="">
											</div>
											<div class="txt">
												<p>Large</p>
											</div>
										</a>
									</li>
									<li>
										<a href="javascript:void(0);">
											<div class="img">
												<img src="images/backdrop_04.png" alt="">
											</div>
											<div class="txt">
												<p>Seamless</p>
											</div>
										</a>
									</li>
									<li>
										<a href="javascript:void(0);">
											<div class="img">
												<img src="images/backdrop_05.png" alt="">
											</div>
											<div class="txt">
												<p>Brick </p>
											</div>
										</a>
									</li>
									<li>
										<a href="javascript:void(0);">
											<div class="img">
												<img src="images/img_18.png" alt="">
											</div>
											<div class="txt">
												<p>White</p>
											</div>
										</a>
									</li>
								</ul>
							</div>
						</div>
					</div>
				</div>	
				<div class="component-content">
					<div class="item">
						<img src="images/big_02.png" alt="">
					</div>
				</div>
				<div class="parameter-slidebar">
					<button class="close-button" type="button"></button>
					<div class="content scrollBox">
						<div class="title">
							<h3>Brick</h3>
						</div>
						<form action="">
							<div class="size item">
								<div class="tit">
									Size
								</div>
								<div class="area">
									<div class="width">
										<span>W</span>
										<input type="text" name="" id="" value="8" />
										<button class="lock" type="button"></button>
									</div>
									<div class="height">
										<span>H</span>
										<input type="text" name="" id="" value="4" />
										<select name="">
											<option value="m">m</option>
										</select>
									</div>
								</div>
							</div>
							<div class="rotate item">
								<div class="tit">
									Rotate
								</div>
								<div class="area">
									<div class="rotate-input">
										<input type="text" name="" id="" value="0°" /> 
									</div>
								</div>
							</div>
							<div class="Notes item">
								<div class="tit">
									Notes (Optional)
								</div>
								<div class="area">
									<div class="input-textarea">
										<textarea placeholder="Enter notes"></textarea>
									</div>
								</div>
							</div>
							<div class="sample item">
								<div class="tit">
									Sample Photos (Optional)
								</div>
								<div class="photos-list ">
									<div class="file">
										<input type="file" name="file" accept="image/*" id="upload" multiple="">
										<div class="desc">
											<div class="box">
												<p class="t1">Drag and drop images here</p>
												<p class="t2">- or -</p>
												<p class="t3">Browse files from your computer</p>
											</div>
										</div>
									</div>
									<div class="content-img scrollBox">
										<ul class="content-img-list ">
											<li>
												<div class="img">
													<img src="images/img_02.png" alt="">
												</div>
											</li>
											<li>
												<div class="img">
													<img src="images/img_03.png" alt="">
												</div>
											</li>
										</ul>
									</div>
								</div>
							</div>
						</form>
					</div>
				</div>		
			</div>
			
		</div>
		
		<!-- 遮罩层 -->
		<div class="shade"></div>
		<script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/swiper.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/uploadimg.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/scrollBar.js" type="text/javascript" charset="utf-8"></script>
		<script src="layui/layui.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/script.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			$(function(){
				$('.colla-item').each(function(){
					var _this = $(this);
					var item = _this.find('li');
					var content = _this.find(".colla-content");
					item.on("click",function(){
						$(this).addClass("active").siblings().removeClass('active');
					});
					if(item.length > 6){
						content.addClass('scrollBox');
					}
				}); 
				$(".scrollBox").scrollBar();
			}) 
		</script>
	</body>

</html>
